<template>
	<!-- 待办事项 -->
	<div class="todo-list-section">
		<div class="top-box">
			<div class="left">
				<img class="img" src="@/assets/icons/index/noticeList.png" alt=""/>
				<span class="title">通知公告</span>
				<span class="unread">{{ total || 0 }}</span>
			</div>
			<span class="more" @click="goTo(moreLink)">详情<el-icon style="margin-left: -2px"><ArrowRight/></el-icon></span>
		</div>
		<el-scrollbar ref="scrollbar" class="content" v-if="noticeList.length" @scroll="scrolling">
			<div class="list-item" v-for="item in noticeList" :key="item.title" @click="gotoDetail(item)">
				<div class="left">
					<p class="type"><dict-tag :options="sys_notice_type" :value="item.noticeType" /></p>
					<p class="title">{{ item.noticeTitle }}</p>
				</div>
				<div class="right">
					<span class="time">{{ item.createTime }}</span>
				</div>
			</div>
		</el-scrollbar>
		<el-empty v-else style="padding-top: 64px" description="暂无待办" :image-size="120"/>
		<el-dialog :title="title" v-model="open" width="50%" center>
			<div  class="ql-editor" v-html="content"></div>
		</el-dialog>
	</div>
</template>

<script setup>
import {useRouter} from "vue-router";
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const emit = defineEmits([])

const {proxy} = getCurrentInstance();
const {  sys_notice_type } = proxy.useDict( "sys_notice_type");


const props = defineProps({
	moreLink: {
		type: String,
	},
	noticeList: {
		type: Array,
	},
	total: {
		type: String,
	},
});
const goTo = function (url) {
	url && proxy.$router.push({path: `${url}`});
};

const title = ref(null)
const open = ref(false)
const content = ref(null)
const gotoDetail = function (item) {
	open.value = true;
	title.value = item.noticeTitle
	content.value = item.noticeContent
};

const scrolling = (e) => {

	//滚动到底部时
	if (proxy.$refs['scrollbar'].wrapRef.scrollHeight - proxy.$refs['scrollbar'].wrapRef.clientHeight == e.scrollTop) {
		emit("scrollbottom");
	}
}

</script>

<style lang="scss" scoped>
// 待办事项
.todo-list-section {
	background-color: #fff;
	border-radius: 6px;
	height: 651px;

	.top-box {
		display: flex;
		justify-content: space-between;
		padding: 20px 23px;
		border-bottom: 1px solid #f4f4f4;
		align-items: center;

		.left {
			display: flex;
			align-items: center;
			gap: 10px;

			.img {
				transform: translateY(2px);
				width: 27px;
				height: 25px;
			}


			.title {
				color: #333333;
				font-weight: 600;

			}

			.unread {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5px 0 5px 0;
				color: #ffffff;
				width: 40px;
				height: 21px;
				background: linear-gradient(90deg, #FF4714, #FE6434);
				border-radius: 11px;
			}
		}

		.more {
			display: flex;
			align-items: center;
			font-size: 12px;
			color: #a5a8ab;
			letter-spacing: 1px;
			cursor: pointer;
			transition: all 100ms;

			&:hover {
				color: #3d7fff;
			}
		}
	}

	.content {
		padding: 20px 20px;
		height: 607px;

		.list-item {
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 6.3px 20px;
			cursor: pointer;
			transition: all 200ms;

			&:nth-child(2n + 1) {
				background-color: #f3f7fe;
			}

			&:hover {
				background-color: #dbefff;
			}

			.left {
				color: #333333;
				font-size: 14px;
				font-weight: 500;
				display: flex;
				gap: 12px;
				width: calc(100% - 80px);

				.title {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					/* 显示的行数，可自行修改 */
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: normal;
					margin-right: 5px;
				}


			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				gap: 12px;
				width: 80px;

				.time {
					margin-left: 7px;
					color: #333333;
					font-size: 14px;
				}
			}
		}
	}
}

@media (max-width: 1189px) {
	.todo-list-section .content .list-item .left {
		width: 60vw;
	}
}
</style>
